<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/common/jquery-3.6.0.min.js"></script>
    <script src="../js/common/jquery.qrcode.min.js"></script>
    <script src="../js/popup.js"></script>
    <style>
      canvas {
        position: absolute;
        top: -1000px;
      }

      .sub_title {
        color: crimson;
      }

      .qrcode-img {
        width: 200px;
      }

      .stop {
        pointer-events: none;
        cursor: not-allowed;
        opacity: 0.6;
      }

      a,
      span {
        display: inline-block;
        margin: 8px;
      }
    </style>
  </head>
  <body style="width: 600px">
    <h1>这里是popup页面</h1>

    <h2 class="sub_title">下面是当前地址二维码</h2>
    <div class="qrcode">
      <img class="qrcode-img" src="" alt="" />
    </div>
    <h2 class="sub_title">常规简单demo</h2>
    <div>
      <a href="#" id="showBadge">显示badge</a>
      <a href="#" id="hideBadge">隐藏badge</a>
      <a href="#" id="showIcon">设置新图标</a>
      <a href="#" id="hideIcon">图标还原</a>
      <a href="#" id="tootipEdit">工具提示修改</a>
      <a href="#" id="openPopup">设置成新popup页面</a>
      <a href="#" id="disablePopup" class="stop"> 禁用当前选项卡 </a>
    </div>
    <h2 class="sub_title">窗口操作</h2>
    <div>
      <a href="#" id="openWindow">打开新窗口</a>
      <a href="#" id="maxWindow">最大化窗口</a>
      <a href="#" id="miniWindow">最小化窗口</a>
      <a href="#" id="fullWindow">全屏化窗口</a>
      <a href="#" id="delWindow" class="stop">删除窗口</a>
    </div>
    <h2 class="sub_title">标签操作</h2>
    <div>
      <a href="#" id="newTab">打开新标签页面</a>
      <a href="#" id="tabOpenWeb">当前标签打开网页</a>
      <a href="#" id="tabHighlight">切换到第一个标签</a>
      <a href="#" id="duplicateTab">复制当前标签</a>
      <a href="#" id="reloadTab">重新加载</a>
      <a href="#" id="delTab">关闭第一个和第二个标签页面</a>
    </div>
    <h2 class="sub_title">popup与contentscript交互</h2>
    <div>
      <!--popup（P）、contentscript(C)、background(B) 简写名字 ID -->
      <a href="#" id="PTOC">popup发消息给contentscript</a>
      <a href="#" id="PTOC2">popup与contentscript互通（长连接）</a>
    </div>
    <h2 class="sub_title">popup与background交互</h2>
    <div>
      <!--popup（P）、contentscript(C)、background(B) 简写名字 ID -->
      <a href="#" id="PTOB1">popup与background互通（长连接）</a>
      <a href="#" id="PTOB">popup发消息给background</a>
    </div>
    <h2 class="sub_title">其他demo</h2>
    <span>右键菜单（menu系列）</span>
    <span>选项</span>
    <span>omnibox</span>
    <span>devtools</span>
  </body>
</html>
